<template>
  <div>
    <h1>自定义指令</h1>
    <input v-focus ref="inp" type="text">
    <h1 v-color="color1">指令1测试</h1>
    <h1 v-color="color2">指令2测试</h1>
    <button @click="openNew">点击打开新闻页面</button>
    <!-- 2.在使用组件时,组件标签内填入内容 -->
    <MyDialog>
      <!-- 需要通过template标签包裹需要分发的结构,包成一个整体 -->
      <!-- <div>您确认要打开新闻页面</div> -->
      <template v-slot:head>
        <div>我是大标题</div>
      </template>
      <template v-slot:content>
        <div>我是内容</div>
      </template>
      <template #footer>
        <button>取消</button>
        <button>确认</button>
      </template>
    </MyDialog>
    <NewContent
      v-if="flag"
    />
    <MyTable :data="list">
      <!-- 3.通过template插槽接收 #插槽名='变量名' -->
      <template #default="obj">
        <button @click="del(obj.row.id)">删除</button>
      </template>
    </MyTable>

    <MyTable :data="list">
      <template #default="{ row }">
        <button @click="show(row)">查看</button>
      </template>
    </MyTable>
  </div>
</template>

<script>
import MyDialog from './components/MyDialog.vue'
import MyTable from './components/MyTable.vue'
import NewContent from './components/NewContent.vue'

export default {
  components: { NewContent, MyDialog, MyTable },
  // mounted() {
  //   this.$refs.inp.focus()
  // },
  data() {
    return {
      flag: false,
      list: [
        { id: 1, name: 'zhangxiaohua', age: 19 },
        { id: 2, name: 'like', age: 25 },
        { id: 3, name: 'lvguangling', age: 30 }
      ],
      color1: 'red',
      color2: 'orange'
    }
  },
  methods: {
    del(id) {
      this.list = this.list.filter(item => item.id !== id)
    },
    show(row) {
      console.log(row)
    },
    openNew() {
      this.flag = !this.flag
    }
  },
  // 2.局部注册指令
  directives: {
    color: {
      // 1.inserted 提供的是元素被添加到页面中时的逻辑
      inserted(el, binding) {
        // binding.value 指令的值
        el.style.color = binding.value
      },
      // 2.update 指令的值修改的时候触发,提供值变化后,dom更新的逻辑
      update(el, binding) {
        el.style.color = binding.value
      }
    },
    // 指令名: 指令的配置项
    focus: {
      inserted(el) {
        el.focus()
      }
    }
  }
}
</script>

<style>
body {
  background-color: #b3b3b3;
}
</style>